import Icon from '@/components/Icon'
import { useStore } from '@/store'
import { useEffect, useState } from 'react'
import { Tabs, Popup } from 'antd-mobile'
import styles from './index.module.scss'
import { observer } from 'mobx-react-lite'
import Channels from './Channels'
import ArticleList from './ArticleList'
import { useNavigate } from 'react-router'
const Home = () => {
  const navigate = useNavigate()
  // 获取频道列表
  const { channelStore } = useStore()
  useEffect(() => {
    channelStore.getChannelList()
    channelStore.getAllChannelList()
  }, [])

  // 控制弹框打开关闭
  const [show, setShow] = useState(false)
  const showPopup = () => {
    setShow(true)
  }
  const hidePopup = () => {
    setShow(false)
  }
  // tab切换时反向修改store中的activeKey
  const tabChange = (value: string) => {
    channelStore.switchActiveKey(Number(value))
  }

  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      <Tabs
        className="tabs"
        activeLineMode="fixed"
        defaultActiveKey="0"
        onChange={tabChange}
        activeKey={channelStore.activeKey.toString()}>
        {channelStore.channelData.channels.map((channel) => {
          return (
            <Tabs.Tab title={channel.name} key={channel.id}>
              {/* 这里是每个tab下对应的内容显示 可以自定义 */}
              <ArticleList channelId={channel.id} />
            </Tabs.Tab>
          )
        })}
      </Tabs>
      <div className="tabs-opration">
        <Icon type="iconbtn_search" clickHandler={() => navigate('/search')} />
        <Icon type="iconbtn_channel" clickHandler={showPopup} />
      </div>
      <Popup visible={show} position="left">
        {/* 频道管理页面 */}
        <Channels hide={hidePopup} />
      </Popup>
    </div>
  )
}

export default observer(Home)
